<template>
  <div class="app-container">
    <Table
      ref="table"
      :auto-featch="true"
      :fetch-data="fetchData"
      :options="options.table"
    >
      <template #default>
        <el-table-column
          label="负责人部门"
          align="center"
          key="deptName"
          prop="deptName"
        />
        <el-table-column
          label="负责人名称"
          align="center"
          key="userName"
          prop="userName"
        />
        <el-table-column
          label="负责人类型"
          align="center"
          key="dutyType"
          prop="dutyType"
        />
      </template>

      <template #actionButton="{ row }">
        <el-button
          type="text"
          icon="Edit"
          @click="handleEdit(row)"
          v-hasPermi="['sysDutyUser:update']"
          >修改</el-button
        >
      </template></Table
    >
    <DialogVform
      :formJson="formJson"
      ref="dialogVform"
      @onSubmit="onSubmit"
      :slots="['slotDept']"
      :title="'修改包保责任人'"
    >
      <template #slotDept>
        <el-row>
          <el-col :span="24">
            <el-form-item label="责任人部门" label-position="right">
              <TreeSelect
                v-model="form.deptId"
                :options="deptTree"
                @change="changeDept"
              ></TreeSelect>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="选择责任人"
              prop="userId"
              label-position="right"
            >
              <el-input
                v-if="!form.deptId"
                disabled
                :value="form.userName"
              ></el-input>
              <el-select v-else @change="userIdChange" v-model="form.userId">
                <el-option
                  v-for="user in userList"
                  :value="user.userId"
                  :label="user.nickName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </DialogVform>
  </div>
</template>

<script setup>
import { listUser, getUser, deptTreeSelect } from "@/api/system/user";
import Table from "@/components/Table/index.vue";
import DialogVform from "@/components/dialogVform/index";
import { apis as APIS } from "@/api/hdanger/bzrls/index.js";
import formJson from "./components/options.json";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";
import TreeSelect from "@/components/TreeSelect/index";
const { proxy } = getCurrentInstance();
const userList = ref([]);
const deptTree = ref([]);
const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) => ["dangerName", "dangerLevel"].includes(i.prop)),
});

const dialogVform = ref();
const plugEdit = (row) => {
  form.value.deptId = row.deptId;
  form.value.userId = row.userId;
  changeDept(row.deptId, row.deptName);
};
const table = ref();
const { onSubmit, fetchData, handleEdit, getList, form, queryParams } =
  useAsyncData({
    APIS,
    formJson,
    dialogVform,
    table,
    proxy,
    plugEdit,
    // form,
  });
onMounted(() => {
  deptTreeSelect().then((res) => {
    deptTree.value = res.data;
  });
});
const changeDept = (val, label) => {
  form.value.deptName = label;
  form.value.deptId = val;
  if (val) {
    listUser({
      pageNum: 1,
      pageSize: 5000000,
      deptId: val,
    }).then((res) => {
      userList.value = res.rows;
    });
  }
};
const userIdChange = (val) => {
  if (val) {
    const user = userList.value.find((user) => user.userId === val);
    form.value.userName = user.nickName;
  } else {
    form.value.userName = "";
  }
};
</script>

<style lang="scss" scoped></style>
